---
title: "Sparklines - Line Customisation"
enterprise: true
---

This section shows how Line Sparklines can be customised by overriding the default line options.

The following can be used to customise Line Sparklines:

* [Line Options](./sparklines-line-customisation/#line-options)
* [Marker Options](./sparklines-line-customisation/#marker-options)
* [Sparkline Padding Options](./sparklines-line-customisation/#sparkline-padding-options)

Also see [Additional Customisations](./sparklines-line-customisation/#additional-customisations) for more advanced
customisations that are common across all sparklines.

The snippet below shows option overrides for the Line Sparkline:

```js
sparklineOptions: {
    type: 'line',
    stroke: 'rgb(124, 255, 178)',
    strokeWidth: 2,
    padding: {
        top: 5,
        bottom: 5,
    },
    marker: {
        itemStyler: (params) => {
            if(params.highlighted) {
                return {
                    size: 7
                }
            }
        }
    },
    highlight: {
        highlightedItem: {
            fill: 'rgb(124, 255, 178)',
            strokeWidth: 0
        }
    },
}
```

The following example demonstrates the results of the Line Sparkline options above:

{% gridExampleRunner title="Line Sparkline Customisation" name="line-sparkline-customisation"  exampleHeight=585 /%}

## Line Options

To apply custom `stroke` and `strokeWidth` attributes to the line, set these properties under `line` options as shown:

```js
sparklineOptions: {
    type: 'line',
    // Customise the line path in the sparkline.
    stroke: 'orange',
    strokeWidth: 2,
}
```

The result of the above configuration is displayed below on the right, compared with default `line` options on the left.

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Line customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Default
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-line.png" alt="Line customisation for highlighted state" constrained=true width="250px" enableDarkModeFilter=true %}
Custom line
{% /imageCaption %}
{% /flex %}

## Marker Options

The markers are enabled by default but the size has been set to `0`px, making them invisible.

The `size` property in the `marker.itemStyler` is `10`px, allowing the markers to become visible when in the highlighted state.

These formats can be modified to your liking by setting the `marker.itemStyler` and `highlight` options as demonstated below.

```js
sparklineOptions: {
    type: 'line',
    marker: {
        enabled: true,
        size: 3,
        shape: 'diamond',
        fill: 'green',
        stroke: 'green',
        strokeWidth: 2,
        itemStyler: (params) => {
            if(params.highlighted) {
                return {
                    size: 10
                }
            }
        }
    }
}
```

* In the snippet above, we have configured the marker size to be `3`px in the un-highlighted normal state, and `10`px in the highlighted state.
* Note that the fill and stroke are also different depending on the highlighted state of the marker.

The result of the above configuration is displayed below, compared with default `marker` options in the first sparkline.

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Marker customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Default
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-marker.png" alt="Marker customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom marker
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-highlighted-marker.png" alt="Marker customisation for highlighted state" constrained=true width="250px" enableDarkModeFilter=true %}
Custom highlighted marker
{% /imageCaption %}
{% /flex %}

See AG Charts [Series Markers](https://www.ag-grid.com/charts/javascript/markers/) for more information on marker options.
See AG Charts [Stylers](https://www.ag-grid.com/charts/javascript/stylers/) for more information on item stylers.

## Sparkline Padding Options

To add extra space around the sparklines, custom `padding` options can be applied in the following way.

```js
sparklineOptions: {
    type: 'line',
    // Adjust the padding around the sparklines.
    padding: {
        top: 10,
        right: 5,
        bottom: 10,
        left: 5
    },
}
```

* The `top`, `right`, `bottom` and `left` properties are all optional and can be modified independently.

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default-padding.png" alt="Padding customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Default padding
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-padding.png" alt="Padding customisation for highlighted state" constrained=true width="250px" enableDarkModeFilter=true %}
Custom padding
{% /imageCaption %}
{% /flex %}

## Additional Customisations

More advanced customisations are discussed separately in the following sections:

* [Axis](./sparklines-axis-types/) - configure the axis type via `axis` options.
* [Tooltips](./sparklines-tooltips/) - configure tooltips using `tooltip` options.
* [Points of Interest](./sparklines-points-of-interest/) - configure individual points of interest using an `itemStyler`.

## Next Up

Continue to the next section to learn about: [Sparkline Data](./sparklines-data/).
